/**
 * "popover" theme for `component/tip`.
 */

.popover {
	font-size: 11px;
	z-index: z-index( 'root', '.popover' );
	position: absolute;
	top: 0;
	left: 0 #{'/*rtl:ignore*/'};
	right: auto #{'/*rtl:ignore*/'};

	.popover__inner {
		background-color: var( --color-surface );
		border: 1px solid var( --color-neutral-10 );
		border-radius: 4px;
		box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.1 ), 0 0 56px rgba( 0, 0, 0, 0.075 );
		text-align: center;
		position: relative;
	}

	.popover__arrow {
		border: 10px dashed var( --color-neutral-10 );
		height: 0;
		line-height: 0;
		position: absolute;
		width: 0;
		z-index: z-index( '.popover', '.popover .popover__arrow' );
	}

	&.fade {
		transition: opacity 100ms;
	}

	@mixin popover__arrow( $side ) {
		$cross-side: '';
		$opposite-side: '';
		$cross-opposite-side: '';
		@if $side == 'top' {
			$opposite-side: 'bottom';
			$cross-side: 'left';
			$cross-opposite-side: 'right';
		} @else if $side == 'bottom' {
			$opposite-side: 'top';
			$cross-side: 'left';
			$cross-opposite-side: 'right';
		} @else if $side == 'left' {
			$opposite-side: 'right';
			$cross-side: 'top';
			$cross-opposite-side: 'bottom';
		} @else if $side == 'right' {
			$opposite-side: 'left';
			$cross-side: 'top';
			$cross-opposite-side: 'bottom';
		}

		&.is-#{$side} .popover__arrow,
		&.is-#{$side}-#{$cross-side} .popover__arrow,
		&.is-#{$side}-#{$cross-opposite-side} .popover__arrow {
			#{$opposite-side}: 0 #{'/*rtl:ignore*/'};
			#{$cross-side}: 50% #{'/*rtl:ignore*/'};
			margin-#{$cross-side}: -10px#{'/*rtl:ignore*/'};
			border-#{$side}-style: solid#{'/*rtl:ignore*/'};
			border-#{$opposite-side}: none#{'/*rtl:ignore*/'};
			border-#{$cross-side}-color: transparent#{'/*rtl:ignore*/'};
			border-#{$cross-opposite-side}-color: transparent#{'/*rtl:ignore*/'};

			&::before {
				#{$opposite-side}: 2px #{'/*rtl:ignore*/'};
				border: 10px solid var( --color-border-inverted );
				content: ' ';
				position: absolute;
				#{$cross-side}: 50% #{'/*rtl:ignore*/'};
				margin-#{$cross-side}: -10px#{'/*rtl:ignore*/'};
				border-#{$side}-style: solid#{'/*rtl:ignore*/'};
				border-#{$opposite-side}: none#{'/*rtl:ignore*/'};
				border-#{$cross-side}-color: transparent#{'/*rtl:ignore*/'};
				border-#{$cross-opposite-side}-color: transparent#{'/*rtl:ignore*/'};
			}
		}
	}

	@include popover__arrow( 'top' );
	@include popover__arrow( 'bottom' );
	@include popover__arrow( 'left' );
	@include popover__arrow( 'right' );

	&.is-top-left,
	&.is-bottom-left,
	&.is-top-right,
	&.is-bottom-right {
		padding-right: 0;
		padding-left: 0;
	}

	&.is-top-left .popover__arrow,
	&.is-bottom-left .popover__arrow {
		left: auto #{'/*rtl:ignore*/'};
		right: 5px #{'/*rtl:ignore*/'};
	}

	&.is-top-right .popover__arrow,
	&.is-bottom-right .popover__arrow {
		left: 15px #{'/*rtl:ignore*/'};
	}

	// inner
	&.is-top .popover__inner,
	&.is-top-left .popover__inner,
	&.is-top-right .popover__inner {
		top: -10px #{'/*rtl:ignore*/'};
	}

	&.is-left .popover__inner,
	&.is-top-right .popover__inner,
	&.is-bottom-right .popover__inner {
		left: -10px #{'/*rtl:ignore*/'};
	}

	&.is-bottom .popover__inner,
	&.is-bottom-left .popover__inner,
	&.is-bottom-right .popover__inner {
		top: 10px #{'/*rtl:ignore*/'};
	}

	&.is-right .popover__inner,
	&.is-top-left .popover__inner,
	&.is-bottom-left .popover__inner {
		left: 10px #{'/*rtl:ignore*/'};
	}

	&.is-dialog-visible {
		z-index: z-index( 'root', 'popover.is-dialog-visible' ); /* Above .dialog */
	}
}

.popover__menu {
	display: flex;
	flex-direction: column;
	min-width: 200px;
}

.popover__menu-item,
.popover__menu-item.button {
	position: relative;
	background: inherit;
	border: none;
	border-radius: 0;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: 400;
	margin: 0;
	padding: 8px 16px;
	text-align: left;
	text-decoration: none;
	line-height: normal;
	transition: all 0.05s ease-in-out;

	&:first-child {
		margin-top: 5px;
	}

	&,
	&:visited {
		color: var( --color-neutral-70 );
	}

	&.is-selected,
	&:hover,
	&:focus {
		background-color: var( --color-primary );
		border: 0;
		box-shadow: none;
		color: white;

		.gridicon {
			color: var( --color-text-inverted );
		}
	}

	&[disabled] {
		color: var( --color-neutral-20 );
		.gridicon {
			color: var( --color-neutral-0 );
		}
	}

	&[disabled]:hover,
	&[disabled]:focus {
		background: transparent;
		cursor: default;
	}

	&:last-child {
		margin-bottom: 5px;
	}

	&::-moz-focus-inner {
		border: 0;
	}

	// with gridicons
	.gridicon {
		color: var( --color-text-subtle );
		vertical-align: bottom;
		margin-right: 8px;
		position: static;
	}
	.gridicons-cloud-download {
		position: relative;
		top: 2px;
	}
	.gridicons-external {
		top: 0;
	}
}

.popover__menu-separator {
	margin: 4px 0;
	background: var( --color-neutral-0 );
}
